<template>
  <div style="height: 500px;">
      <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="单号">
                  <el-input v-model="formInline.number" placeholder="请输入单据编号" clearable />
              </el-form-item>
              <el-form-item label="客户：">
                      <el-select v-model="formInline.supName" clearable style="width: 310px; margin-left: 10px;"
                        placeholder="请选择客户">
                        <el-option v-for="customer in customers" :key="customer.id" :label="customer.supName"
                          :value="customer.supName" />
                      </el-select>


                    </el-form-item>
              <el-form-item label="单据日期">
                  <el-date-picker v-model="formInline.date" type="date" clearable />
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="loadMenus">查询</el-button>
                  <el-button @click="onReset">重置</el-button>
              </el-form-item>
          </el-form>
      </div>
      <div>
          <el-table :data="page.records" border style="width: 1180px">
              <el-table-column prop="id" label="#" width="50" />
              <el-table-column prop="erpSupplier.supNames" label="客户" width="140" />
              <el-table-column prop="number" label="单据编号" width="170" />
              <el-table-column prop="erpDepotItemList[0].erpMaterial.material_name" label="商品信息" width="320" />
              <el-table-column prop="createTime" label="单据日期" width="170" />
              <el-table-column prop="erpUser.username" label="操作员" width="84" />
              <el-table-column prop="totalPrice" label="金额合计" width="82" />
              <el-table-column label="状态" width="82" align="center">
                  <template #default="scope">
                      <el-tag v-if="scope.row.status == 0" type="danger" effect="light">
                          未审核
                      </el-tag>
                      <el-tag v-else-if="scope.row.status == 1" type="success" effect="light">
                          已审核
                      </el-tag>
                      <el-tag v-else-if="scope.row.status == 2" type="warning" effect="light">
                          完成销售
                      </el-tag>
                  </template>
              </el-table-column>
          </el-table>
      </div>
      <el-pagination 
          v-model:page-size="page.size" 
          v-model:current-page="page.current" 
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange" 
          :page-sizes="[2, 4, 8, 10]" 
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total" 
          background 
          style="margin-top:20px;">
      </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import request from '@/api/request';
import { ElMessage } from 'element-plus';

const loading = ref(false);
const page = ref({
  current: 1,
  size: 10,
  total: 0,
  records: []
});
const formInline = reactive({
    number: '',
    supName: '',
    date: ''
});
const customers = ref([]); // 存储客户数据

const loadCustomers = () => {
  request({
    url: '/basic/vendor/list',
    method: 'get'
  }).then(res => {

    customers.value = res.data; // 更新客户数据
  }).catch(err => {
    console.error(err);
  });
};

const loadMenus = () => {
  loading.value = true;
  request({
    url: '/sale/findByPage',
    method: 'get',
    params: {
      current: page.value.current,
      size: page.value.size,
      number: formInline.number,
      supName: formInline.supName, 
      date: formInline.date 
    }
  }).then(res => {
    page.value.records = res.data.records;
    page.value.total = res.data.total;
  }).catch(err => {
    ElMessage.error('加载失败');
    console.error(err);
  }).finally(() => {
    loading.value = false;
  });
};

const onReset = () => {
  formInline.number = ''; // 清空单号
  formInline.supName = ''; // 重置客户选择
  formInline.date = ''; // 清空日期
  loadMenus();
};




const handleCurrentChange = (val) => {
  page.value.current = val;
  loadMenus();
};

const handleSizeChange = (val) => {
  page.value.size = val;
  page.value.current = 1;
  loadMenus();
};



onMounted(() => {
  loadCustomers();
  loadMenus();
});
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
